<template>
  <div class="card">
    <div class="card-header">
      <div class="title">
        <i class="icon font_family icon-yingxiong"></i><span>英雄列表</span>
      </div>
      <div class="point">
        <i class="icon font_family icon-sandian"></i>
      </div>
    </div>
    <!------- end of card-header --------->
    <div class="nav">
      <div 
          class="item" 
          :class="{ active: active === index}" 
          v-for="(item, index) in heroCates" :key="index"
          @click="saveIndex(index)">
        <div class="nav-link">{{ item.name }}</div>
      </div> 
    </div>
    <div class="list">
      <swiper ref="list" :options="{autoHeight: true}">
        <swiper-slide v-for="(item, index) in heroCates" :key="index">
          <div class="item" v-for="(list, index) in item.heroList" :key="index">
            <router-link tag="div" class="info" :to="`/heros/${list._id}`">
              <img class="avatar" :src="list.avatar" alt="">
              <div class="name">{{ list.name }}</div>
            </router-link> 
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HeroCard',
    data() {
      return {
        active: 0,
        heroCates: [],
        index: 0
      }
    },
    methods: {
      // 获取文章列表
      async getHeroCates() {
        const res = await this.$http.get('/heros/list');
        // console.log(res);
        this.heroCates = res.data
      },

      // 点击列表
      saveIndex(index) {
        this.active = index
      }
    },
    created() {
      this.getHeroCates();
    }
  }
</script>

<style lang="scss" scoped>
  // --------- card --------
  .card {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
    .card-header {
      height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #999;
      .title {
        display: flex;
        flex: 1;
        align-items: center;
        .icon {
          font-size: 22px;
          margin-right: 2px;
        }
        span {
          font-size: 18px;
        }
      }
    }
    .active {
      color: #409eff;
      padding-bottom: 3px;
      border-bottom: 2px solid #409eff;
    }
    .nav {
      display: flex;
      justify-content: space-between;
      padding: 7px 0;
    }
    .list {
      display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      .info {
        width: 20%;
        float: left;
        text-align: center;
        padding: 5px;
        // border: 1px solid red;
        .avatar {
          width: 100%;
          height: 55px;
          border-radius: 5px;
        }
        .name {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
</style>